<template>
	<view class="">
		<page-head title="已完成" :headtype="2"></page-head>
		<view class="content" v-if="Object.keys(orderDetail).length>0">
			<view class="title_type" v-if="orderDetail.order_type==4">
				取货方式：到店购买
			</view>
			<view class="title_type" v-if="orderDetail.order_type==2">
				取货方式：快递发货
			</view>
			<view class="title_type" v-if="orderDetail.order_type==3">
				取货方式：同城配送
			</view>
			<view class="title_type" v-if="orderDetail.order_type==1">
				取货方式：到店自提
			</view>
			<view class="product_warp">
				<view v-for="(item,index) in orderDetail.detail" :key="index" style="width: 100%;"
					:class="index!=0?'marT20':''">
					<product-item-num :item="item" type="end"></product-item-num>
				</view>
			</view>
			<view class="cell_warp">
				<order-cell title="实付" lcolor="#666666" :lsize="30" :word="orderDetail.pay_amount+'积分'+expWord"
					rcolor="#333333" :rsize="30" padding="0rpx 0rpx 0rpx 0rpx"></order-cell>
			</view>
			<view class="cell_warp">
				<order-cell title="订单编号" lcolor="#666666" :lsize="30" :word="orderDetail.order_sn" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
				<order-cell title="付款时间" lcolor="#666666" :lsize="30" :word="orderDetail.pay_time" rcolor="#666666"
					:rsize="30" v-if="orderDetail.pay_time"></order-cell>
				<order-cell title="商品金额" lcolor="#666666" :lsize="30" :word="orderDetail.pay_amount+'积分'"
					rcolor="#666666" :rsize="30"></order-cell>
				<order-cell title="快递费" lcolor="#666666" :lsize="30"
					:word="orderDetail.freight>0?'￥'+orderDetail.freight:'0.00'" rcolor="#666666"
					:rsize="30"></order-cell>
				<order-cell title="运费券" lcolor="#666666" :lsize="30"
					:word="orderDetail.coupon_freight_amount>0?'-￥'+orderDetail.coupon_freight_amount:'无'"
					rcolor="#666666" :rsize="30" :rightIcon="true"></order-cell>
			</view>
			<view class="cell_warp" v-if="orderDetail.order_type==2&&orderDetail.order_status!=0"
				style="margin-bottom: 90rpx;">
				<order-cell title="发货时间" lcolor="#666666" :lsize="30" :word="orderDetail.delivery_time" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
				<order-cell title="快递单号" lcolor="#666666" :lsize="30" :word="orderDetail.delivery_no" rcolor="#666666"
					:rsize="30"></order-cell>
				<order-cell title="收货时间" lcolor="#666666" :lsize="30" :word="orderDetail.arrive_time" rcolor="#666666"
					:rsize="30"></order-cell>
			</view>
			<view class="cell_warp" v-if="orderDetail.order_type==1&&orderDetail.order_status!=0"
				style="margin-bottom: 90rpx;">
				<order-cell title="自提时间" lcolor="#666666" :lsize="30" :word="orderDetail.arrive_time" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
			</view>
			<view class="cell_warp" v-if="orderDetail.order_type==3&&orderDetail.order_status!=0"
				style="margin-bottom: 90rpx;">
				<order-cell title="配送时间" lcolor="#666666" :lsize="30" :word="orderDetail.delivery_time" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
				<order-cell title="收货时间" lcolor="#666666" :lsize="30" :word="orderDetail.arrive_time" rcolor="#666666"
					:rsize="30"></order-cell>
			</view>
		</view>
	</view>
</template>

<script>
	import productItemNum from "@/components/product_item_num.vue"
	import orderCell from "@/components/order_cell.vue"
	export default {
		components: {
			productItemNum,
			orderCell
		},
		data() {
			return {
				order_sn: null,
				orderDetail: {},
				ercode: {},
				expWord: ''
			}
		},
		onLoad(options) {
			if (options.orderSn) {
				this.order_sn = options.orderSn
				this.getOrderDetail()
			}
		},
		methods: {
			async getOrderDetail() {
				let data = {
					order_sn: this.order_sn
				}
				await this.apifun.unirequest('/api/order/getOrderDetail', 'post', data, (res => {
					if (res.code == 200) {
						this.orderDetail = res.data
						if (res.data.freight && res.data.coupon_freight_amount) {
							if (Number(res.data.freight) > Number(res.data.coupon_freight_amount)) {
								this.expWord = '+￥' + Number(Number(res.data.freight) - Number(res.data
									.coupon_freight_amount))
							} else {
								this.expWord = '+￥0.00'
							}
						}
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title_type {
		font-size: 28rpx;
		color: #333333;
	}

	.pay_btn_gary {
		width: 150rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background-color: #E9E9EA;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #A2A2A2;
		margin-right: 20rpx;
	}

	.pay_btn_warp {
		display: flex;
		align-items: center;
	}

	.ercode_img {
		width: 320rpx;
		height: 320rpx;
	}

	.ercode_img_gary {
		width: 320rpx;
		height: 320rpx;
		filter: opacity(0.2);
	}

	.er_tips {
		color: #9E9E9E;
		font-size: 24rpx;
	}

	.erc_title {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.erc_type_word {
		font-size: 24rpx;
		color: #666666;
	}

	.erc_body {
		width: 100%;
		height: 460rpx;
		padding: 20rpx 0rpx 40rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.erc_line {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.line {
			width: 572rpx;
			border-top: 2rpx dashed #D8D8D8;
		}

		.r_cir {
			width: 15rpx;
			height: 30rpx;
			background-color: #F4F4F4;
			border-radius: 30rpx 0rpx 0rpx 30rpx;
		}

		.l_cir {
			width: 15rpx;
			height: 30rpx;
			background-color: #F4F4F4;
			border-radius: 0rpx 30rpx 30rpx 0rpx;
		}
	}

	.erc_top {
		width: 100%;
		height: 166rpx;
		padding: 40rpx 40rpx 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.ercode_warp {
		width: 630rpx;
		height: 682rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		margin: 0rpx auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.mytopbg,
	.topblock {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 338rpx;
		z-index: -1;
	}




	.marT20 {
		margin-top: 20rpx;
	}

	.pay_word {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pay_btn {
		width: 150rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background-color: #9E190F;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		/* 兼容 iOS < 11.2 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
		/* 兼容 iOS >= 11.2 */
	}

	.sub_body {
		width: 100%;
		background-color: #FFFFFF;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #F4F4F4;
	}

	.cell_item {
		width: 100%;
		padding: 20rpx 0rpx 20rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.deduct {
		color: #666666;
		font-size: 30rpx;
		display: flex;
		align-items: center;

	}

	.ci_title {
		color: #666666;
		font-size: 30rpx;
	}

	.cell_warp {
		width: 690rpx;
		padding: 20rpx 32rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.add_bottom {
		color: #333333;
		font-size: 26rpx;
	}

	.add_center {
		font-size: 26rpx;
		color: #666666;
		margin-top: 5rpx;
		margin-bottom: 20rpx;
	}

	.add_data {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.addr_word {
		width: 580rpx;
	}

	.add_top {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.city {
		font-size: 30rpx;
		color: #333333;
	}

	.edit_addr {
		width: 180rpx;
		color: #9E9E9E;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.address {
		width: 690rpx;
		border-radius: 14rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.add_nodata {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.addr_tips {
			color: #666666;
			font-size: 30rpx;
		}
	}

	.product_warp {
		width: 690rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin: 18rpx auto;
	}

	.sel_type {
		width: 196rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: url("@/static/order/buy_type.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9E190F;
		font-size: 30rpx;
		border: 1rpx solid #9E190F;
	}

	.nosel_type {
		width: 196rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: url("@/static/order/buy_type.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #979797;
		font-size: 30rpx;
	}

	.type_warp {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.content {
		width: 100%;
		padding: 30rpx 30rpx 180rpx 30rpx;
		box-sizing: border-box;
	}
</style>